@use 'sass:color';
@use '../utils/box-shadow_variables';
@use '../utils/font_variables';
@use '../utils/size_variables';

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

.button {
  align-items: center;
  background-color: var(--token-color-palette-neutral-50);
  border: 1px solid var(--token-color-palette-neutral-300);
  border-radius: size_variables.$radius;
  box-shadow: box-shadow_variables.$box-shadow-low;
  cursor: pointer;
  color: var(--token-color-palette-neutral-600);
  display: inline-block;
  font-size: size_variables.$size-8;
  font-weight: font_variables.$font-weight-semibold;
  min-height: 2.25rem;
  min-width: 6rem;
  padding: 0.5625rem 0.9375rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition:
    background-color size_variables.$speed,
    border-color size_variables.$speed,
    box-shadow size_variables.$speed,
    color size_variables.$speed;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;

  @keyframes spinAround {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }

  &:active,
  &.is-active,
  &:focus {
    border-color: color.adjust(#c2c5cb, $lightness: -10%);
    box-shadow: box-shadow_variables.$button-box-shadow-standard;
    color: color.adjust(#656a76, $lightness: -10%);
  }

  &:focus:not(:active) {
    box-shadow: 0 0 0 0.125em rgba(21, 99, 255, 0.25);
  }

  &:disabled {
    background-color: hsl(0, 0%, 100%);
    border-color: var(--token-color-palette-neutral-50);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.5;
  }

  // Button types: is-compact, is-danger, is-danger-outlined, is-flat, is-ghost, is-icon, is-loading, is-link, is-outline, is-primary, is-transparent.

  &.is-compact {
    height: 2rem;
    padding: size_variables.$spacing-4 size_variables.$spacing-12;
  }

  &.is-danger {
    background-color: var(--token-color-palette-red-200);
    border-color: color.adjust(#e52228, $lightness: -2%);
    color: hsl(0, 0%, 100%);
    text-shadow: 0 1px 1px rgba(hsl(0, 0%, 4%), 0.25);

    &:hover:not([disabled]) {
      background-color: color.adjust(#e52228, $lightness: -5%);
      border-color: color.adjust(#e52228, $lightness: -5%);
      box-shadow: box-shadow_variables.$box-shadow-middle;
    }

    &:active,
    &.is-active {
      background-color: color.adjust(#e52228, $lightness: -10%);
      border-color: color.adjust(#e52228, $lightness: -10%);
      box-shadow: box-shadow_variables.$box-shadow-middle;
    }

    &:focus {
      border-color: color.adjust(#e52228, $lightness: -10%);
      box-shadow: box-shadow_variables.$button-box-shadow-standard;
    }
  }

  &.is-danger-outlined {
    border: 1px solid var(--token-color-palette-red-200);
    color: var(--token-color-palette-red-200);
  }

  &.is-flat {
    min-width: auto;
    border: none;
    box-shadow: none;
  }

  &.is-ghost {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--token-color-palette-blue-200);
    text-decoration: none;

    &:hover {
      color: var(--token-color-palette-blue-500);
      background-color: var(--token-color-palette-neutral-50);
    }
  }

  &.is-icon {
    padding: 0.25rem size_variables.$spacing-24;
  }

  &.is-loading {
    color: transparent !important;
    pointer-events: none;
    &::after {
      animation: spinAround 500ms infinite linear;
      border: 2px solid var(--token-color-palette-neutral-300);
      border-radius: 290486px;
      border-right-color: transparent;
      border-top-color: transparent;
      content: '';
      display: block;
      height: 1em;
      width: 1em;
      left: calc(50% - (1em / 2));
      top: calc(50% - (1em / 2));
      position: absolute !important;
    }
  }

  &.is-link {
    background-color: transparent;
    border-color: transparent;
    color: var(--token-color-palette-blue-200);
    text-decoration: none;
    font-weight: font_variables.$font-weight-semibold;
    box-shadow: none;
    min-width: 4rem;
  }

  &.is-primary {
    background-color: var(--token-color-palette-blue-200);
    border-color: color.adjust(#1060ff, $lightness: -2%);
    color: hsl(0, 0%, 100%);
    font-weight: font_variables.$font-weight-bold;
    text-shadow: 0 1px 1px rgba(hsl(0, 0%, 4%), 0.25);

    &:disabled {
      background-color: var(--token-color-palette-neutral-500);
      border-color: transparent;
      box-shadow: none;
    }

    &:hover:not([disabled]) {
      background-color: color.adjust(#1060ff, $lightness: -5%);
      border-color: color.adjust(#1060ff, $lightness: -5%);
      box-shadow: box-shadow_variables.$box-shadow-middle;
    }

    &:active,
    &.is-active {
      background-color: color.adjust(#1060ff, $lightness: -10%);
      border-color: color.adjust(#1060ff, $lightness: -10%);
      box-shadow: box-shadow_variables.$box-shadow-middle;
    }

    &:focus {
      border-color: color.adjust(#1060ff, $lightness: -10%);
      box-shadow: box-shadow_variables.$button-box-shadow-standard;
    }

    &.is-loading::after {
      border-color: transparent transparent hsl(0, 0%, 100%) hsl(0, 0%, 100%);
    }

    &.is-underlined {
      &:active,
      &.is-active {
        background-color: transparent;
        border-bottom: 2px solid color.adjust(#1060ff, $lightness: -10%);
        border-radius: unset;
        color: color.adjust(#1060ff, $lightness: -10%);
      }
    }
    // is-primary.is-outlined the only is-outlined buttons are primary.
    &.is-outlined {
      background-color: transparent;
      border-color: var(--token-color-palette-blue-200);
      color: var(--token-color-palette-blue-200);

      &:hover,
      &:focus {
        background-color: transparent;
        border-color: color.adjust(#1060ff, $lightness: -10%);
        color: var(--token-color-palette-blue-200);
      }

      &:active,
      &.is-active {
        background-color: transparent;
        border-color: color.adjust(#1060ff, $lightness: -10%);
        color: color.adjust(#1060ff, $lightness: -10%);
      }
    }

    &.is-outlined [disabled] {
      background-color: transparent;
      border-color: var(--token-color-palette-neutral-500);
      box-shadow: none;
      color: var(--token-color-palette-neutral-500);
    }
  }

  &.is-transparent {
    color: currentColor;
    background: none;
    border: none;
    box-shadow: none;
    min-width: auto;
    padding: 0;
  }
  // End of button types

  &.tool-tip-trigger {
    color: var(--token-color-palette-neutral-500);
    min-width: auto;
    padding: 0;
  }

  &.has-icon-left,
  &.has-icon-right {
    .hs-icon {
      height: 16px;
      min-width: auto;
      width: 16px;
    }
  }

  &.has-icon-left {
    .hs-icon {
      &,
      &:first-child:last-child {
        position: relative;
        left: -(size_variables.$size-10);
      }
    }
  }

  &.has-icon-right {
    .hs-icon {
      &,
      &:first-child:last-child {
        margin-left: size_variables.$spacing-4;
        margin-right: -(size_variables.$spacing-4);
      }
    }
  }
}

.button.icon {
  box-sizing: border-box;
  padding: 0 size_variables.$spacing-4;
  height: 24px;
  width: 24px;
  &,
  & .icon {
    min-width: 0;
  }
}

.button.auto-width,
.button .icon.auto-width {
  width: auto;
  min-width: auto;
  margin: 0 !important;
}

a.button.disabled {
  color: hsl(0, 0%, 100%);
  background-color: var(--token-color-palette-neutral-500);
  opacity: 0.5;
  border-color: transparent;
  box-shadow: none;
  cursor: default;
}
.icon-button {
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  cursor: pointer;
}
.text-button {
  padding: unset;
  border: none;
  background-color: inherit;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;

  &:disabled {
    color: var(--token-color-palette-neutral-300);
    cursor: not-allowed;
  }
}

// TODO HDS adoption cleanup: audit styles with design and see what to keep/remove once buttons are fully HDS
// Existing class on <Hds::Copy::Button> component, modifying to match existing UI Structure buttons
.hds-copy-button {
  font-weight: font_variables.$font-weight-semibold; // TODO delete
  box-shadow: box-shadow_variables.$box-shadow-low; // TODO delete

  &.white-icon svg {
    color: hsl(0, 0%, 100%);
  }

  &.icon-grey-300 svg {
    color: var(--token-color-palette-neutral-300);
  }

  &.icon-grey-500 svg {
    color: var(--token-color-palette-neutral-400);
  }

  &.transparent {
    background: none;
    box-shadow: none;
    border: 1px solid transparent;
    &:hover {
      border: 1px solid var(--token-color-palette-neutral-300);
      border-color: var(--token-color-border-strong);
    }
  }

  &.primary {
    background-color: var(--token-color-palette-blue-200);
    border-color: color.adjust(#1060ff, $lightness: -2%);
    color: hsl(0, 0%, 100%);
    font-weight: font_variables.$font-weight-bold;
    text-shadow: 0 1px 1px rgba(hsl(0, 0%, 4%), 0.25);
    svg {
      color: hsl(0, 0%, 100%);
    }
  }

  &.secondary {
    background-color: var(--token-color-palette-neutral-50);
    border: 1px solid var(--token-color-palette-neutral-300);
  }

  &.in-dropdown {
    div {
      font-size: size_variables.$size-7;
    }
    svg {
      color: transparent;
    }
  }
}

// Existing class on <Hds::Button> component, modifying to match existing UI Structure buttons
.hds-button {
  font-weight: font_variables.$font-weight-semibold; // TODO consult design on font weight after button class audit
  display: inline-flex; // temporarily fixes existing button alignment until we adopt Hds::ButtonSet
  // for toolbar-button must pass arg @color="secondary"
  &.toolbar-button {
    color: hsl(0, 0%, 4%);
    background: none;
    border: none;
    box-shadow: none;
    &:hover:not(.disabled) {
      background-color: var(--token-color-palette-neutral-100);
      color: var(--token-color-palette-blue-200);
    }
  }
}
